<template>
  <div>
    <button @click="show">柱状图</button>
    <button @click="myEachars">饼状图</button>
    <el-row>
  <el-col :span="10"><div class="grid-content bg-purple">
    <div id="myChart" :style="{width: '800px', height: '600px'}"></div>

  </div></el-col>
  
  <el-col :span="10" :offset="4"><div class="grid-content bg-purple-light">
    <el-descriptions title="    " direction="vertical" :column="4" border>
  <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
  <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
  <el-descriptions-item label="居住地" :span="2">苏州市</el-descriptions-item>
  <el-descriptions-item label="备注">
    <el-tag size="small">学校</el-tag>
  </el-descriptions-item>
  <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
</el-descriptions>


  </div></el-col>
</el-row>
 
</div>
</template>
<script>
import * as echarts from 'echarts';
import {bing} from "@/api/system/notices";
export default {
  name: "pie",
  //参数
  data(){
    return{
      pName:[],//name值
      pValue:[],//value值
      dateValue:null,
    }
  },
  mounted() {
    this.$nextTick(()=>{
      this.getList();
    })
  },
  created() {
  },
  methods:{
    getList() {
      bing().then(res => {
     
    
        if (res.code == 200) {
          this.dateValue = res.rows
         this.myEachars(res.rows);
        }
      })
    },
    //饼图
    myEachars(){
      let datm = this.dateValue
      var datas = []
      for (let i = 0; i < datm.length; i++) {
        var item = {
          value: datm[i].value,
          name: datm[i].name,
        };
        datas.push(item);
      }
    

      // // 基于准备好的dom，初始化echarts实例
       var myChart = echarts.init(document.getElementById('myChart'));
      // 指定图表的配置项和数据
      var option = {
        legend: {
          top: 'bottom'
        },
        tooltip: {
          trigger: 'item'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: "人数统计图",
            type: 'pie',
            radius: [50, 250],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data:datas
          }
        ]
      };

     
     // const myChart = echarts.init(document.getElementById("mychart"));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
     
    },

    show(){
      let datm = this.dateValue
      var datas = []
      var xData=[]
      console.log(`this.dateValue`,datm );
      if (datm==null){
        datazhu.push(0,0);
        xData.push("男","女");
      }else {
        for (let i = 0; i < datm.length; i++) {
          var item = {
            value: datm[i].value,
          };
          var items = {
            value: datm[i].name,
          };
          datas.push(item);
          xData.push(items);
        }
      }
      var myChart = echarts.init(document.getElementById('myChart'));
       // 基本柱状图
       const option2 = {
        xAxis: {
          data: xData
        },
        yAxis: {},
        series: [
          {
            type: "bar", //形状为柱状图
            data: datas
          }
        ]
      }
      myChart.setOption(option2);
      console.log(`xxxxx`);
    }
  }
}
</script>
